<template>
	<view class="content ">
		<view class="menu">
			<uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
		</view>
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item.id">
				<image lazy-load class="pic" :src="item.url" mode="widthFix" @click="onPreview(index)"></image>	
				<view class="text">{{index}}</view>
			</view>			
		</view>
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="refreshempty" size="26" color="#444"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="26" color="#444"></uni-icons>
			</view>
		</view>
		<view class="loadmore">
			<uni-load-more status="more"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import {ref,computed} from "vue"
import {onReachBottom, onPullDownRefresh} from "@dcloudio/uni-app"

const pets=ref([])
const current=ref(0)
const classify = [
	{key:"all", value:"全部"},
	{key:"dog", value:"狗狗"},
	{key:"cat", value:"猫猫"},
]
const values=computed(()=>classify.map(item=>item.value))

function network(){
	uni.showNavigationBarLoading()
	uni.request({
		url:"https://api.thecatapi.com/v1/images/search",
		data:{
			limit:10
		}	
	}).then(res=>{
		if (res.statusCode === 200){
			pets.value=[...pets.value, ...res.data]
		}
		else{
			uni.showToast({
				title:res.data,
				icon:"none",
				duration:2000
			})
		}
	}).catch(err=>{
		uni.showToast({
			title:"请求有误 ，请重新刷新",
			icon:"none",
			duration:2000
		})
	}).finally(()=>{
		uni.hideNavigationBarLoading()
		uni.stopPullDownRefresh()
	})
}
network()

//点击预览
function onPreview(index){
	let urls = pets.value.map(item=>item.url);
	uni.previewImage({
		current:index,
		urls
	}) 
}
function onClickItem(e){	
	current.value=e.currentIndex
}
onReachBottom(()=>{
	network()
})

onPullDownRefresh(()=>{
	pets.value=[]
	network()
})

const onRefresh = function(){
	//console.log("refresh")
	uni.startPullDownRefresh();
}

const onTop = function(){
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
	})
}

</script>

<style lang="scss" scoped>
.content{
	.menu{
		padding-top: 50rpx;
	}
	.layout{
		padding:50rpx;
		.box{
			margin-bottom: 60rpx;
			box-shadow: 0 30rpx 60rpx rgba(0,0,0,0.5);
			border-radius: 20rpx;
			overflow: hidden;
			.pic{
				image{
					width: 100%;
				}
			}
		}
	}
	.loadmore{
		padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
	}
	.float{
		position: fixed;
		right:30rpx;
		bottom:80rpx;
		padding-bottom: env(safe-area-inset-bottom);
		.item{
			width:90rpx;
			height:90rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border:1px solid #eee;		
		}
		.box{
			border: 1px solid red;
			height:env(safe-area-inset-bottom);
		}
	}
}
</style>
